import React, { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux';
import '../../assets/sass/home_page/Tuo/Tuo.scss'
import { Rnd } from "react-rnd"
import EventBus from '../Eventbus/EventBus'

function Tuo() {
  const [height1, setHeight1] = useState(150)
  const [width1, setWidth1] = useState(150)
  const [x, setx] = useState(200)
  const [y, sety] = useState(200)
  const lists=useSelector((store:any)=>store.count.list)
  const datas=useSelector((store:any)=>store.count.cnm)
  const dataes=useSelector((store:any)=>store.count.cnmd)
  const dataeos=useSelector((store:any)=>store.count.cnmb)
  // const refs=useRef<HTMLImageElement>(null)
  // console.log(refs)
  
  useEffect(()=>{
      EventBus.addListener('eventName', (data: any) => {
      alert(data);
      console.log(data)
    })

  },[])
  const onclicks=(index:any)=>{
    console.log(index)
  }
  return (
    <div className='boxes' style={{background:datas, backgroundImage:`url(${dataes})`}}>
      {lists && lists.map((item:any,index:any)=>(
          <>
          
           <Rnd
           className='rnds'
           key={index}
        default={{
          x: x,
          y: y,
          width: width1,
          height: height1
        }}
        minWidth={150}
        minHeight={150}
        maxWidth={300}
        maxHeight={300}
        bounds=".boxes"
        style={{ backgroundColor: "red" }}
        onResize={(e, direction, ref, delta, position) => {
          setx(position.x)
          sety(position.y)
          // setHeight1(ref)
          setWidth1(ref.style.width)
          setHeight1(ref.style.height)
        }}
      >
        <div className='rotate'></div>
        <img src={item.cnmd && item.cnmd} alt="" className='images' onClick={()=>{onclicks(index)}} />
        <h2 style={{color:dataeos}}>{item.wcnmd && item.wcnmd}</h2>
      </Rnd>
          </>
      ))}
    </div>
  );
}

export default Tuo
